<template>
  <div class="sales-board">
      <div class="sales-board-intro">
        <h2>宾馆预订</h2>
        <p></p>
      </div>
      <div class="sales-board-form">
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  定房数量：
              </div>
              <div class="sales-board-line-right">
                  <v-counter :max="100" :min="20"></v-counter>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  宾馆类型：
              </div>
              <div class="sales-board-line-right">
                  <v-selection :selections="tradeList"></v-selection>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  套餐：
              </div>
              <div class="sales-board-line-right">
                  <v-mul-chooser :selections="versionList"></v-mul-chooser>
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  有效时间：
              </div>
              <div class="sales-board-line-right">
                  半年
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">
                  总价：
              </div>
              <div class="sales-board-line-right">
                  500 元
              </div>
          </div>
          <div class="sales-board-line">
              <div class="sales-board-line-left">&nbsp;</div>
              <div class="sales-board-line-right">
                  <div class="button">
                    立即购买
                  </div>
              </div>
          </div>
      </div>
      <div class="sales-board-des">
        <h2>产品说明</h2>
        <p>更好的服务顾客，让顾客住行快乐。</p>

        <table class="sales-board-table">
          <tbody>
              
          </tbody>
      </table>
      </div>
  </div>
</template>

<script>
import VSelection from '../base/selection'
import VCounter from '../base/counter'
import VMulChooser from '../base/multiplyChooser'

export default {
  components: {
    VSelection,
    VCounter,
    VMulChooser
  },
  data () {
    return {
      tradeList: [
        {
          label: '单人间',
          value: 0
        },
        {
          label: '双人间',
          value: 1
        },
        {
          label: '单人大床房',
          value: 2
        },
        {
          label: '家庭套房',
          value: 3
        },
        {
          label: '豪华间',
          value: 4
        }
      ],
      versionList: [
        {
          label: '初级版',
          value: 0
        },
        {
          label: '中级版',
          value: 1
        },
        {
          label: '高级版',
          value: 2
        },
        {
          label: '豪华版',
          value: 3
        }
      ]
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>
